<template>
  <div class="mainbox">
    <el-container class="container">
      <el-header>
        <div>
          <img src="../assets/heima.png" alt />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="exit()" size="mini">退出登录</el-button>
      </el-header>
      <el-container>
        <el-aside :width="collapse ? '64px':'200px'" @click="arrow">
          <!-- //点击按钮 导航菜单缩放 -->
          <div class="btn" @click="arrow">|||</div>
          <!-- 导航菜单 -->
          <el-menu
            :default-active="getPath"
            background-color=" #292f42"
            class="el-menu-vertical-demo"
            active-text-color="#00ff00"
            :unique-opened="true"
            :collapse="collapse"
            :router="true"
            text-color="#fff"
            :collapse-transition="false"
          >
            <el-submenu v-for="(item1,index) in  menuList" :key="index" :index="'/'+item1.path">
              <template slot="title">
                <i :class="iconsObj[item1.id]" style="margin-right:10px"></i>
                <span>{{item1.authName}}</span>
              </template>
              <el-menu-item-group v-for="(item2,index2) in  item1.children" :key="index2">
                <el-menu-item :index="'/'+item2.path" @click="savePath(item2.path)">
                <i class="el-icon-menu" style="margin-right:10px"></i>
                  <span>{{item2.authName}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

          <!--------------------- end ----------------------------->
        </el-aside>
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
           
<script>
import {menus_api} from '@/api/login_api.js'
export default {
  data() {
    return {
      //声明一个空数组，把data数据装进来
      menuList: "",
      iconsObj: {
        "125": "iconfont icon-user",
        "103": "iconfont icon-tijikongjian",
        "101": "iconfont icon-shangpin",
        "102": "iconfont icon-danju",
        "145": "iconfont icon-baobiao"
      },
      //显示菜单导航的宽度
      collapse:false,
      //获取path
      getPath:'',
    };
  },
  //设置获取请求的时间
  created() {
    this.getMenu();
    //创建dom的时候赋值给default-active
    this.getPath=window.sessionStorage.getItem('path')
    // console.log(this.getPath,333333333);
  },
  methods: {
    exit() {
      //删除本地token,回到登录页面
      window.sessionStorage.setItem("token", null);
      this.$router.push("/login");
    },
    //axios请求
    async getMenu() {
      const { data: res } = await menus_api();
      // console.log(res.data, 777);
      //  获取菜单数据  并赋值给 menList
      this.menuList = res.data;
    },
    //导航栏方法
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //点击按钮，让菜单导航缩放
    arrow() {
       this.collapse=!this.collapse
    },
    //点击菜单显示高亮
    savePath(path) {
      window.sessionStorage.setItem('path',path)
    }
  }
};
</script>
<style lang="less" scoped>
.mainbox {
  height: 100%;
}
.container {
  height: 100%;
  background-color: #333744;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 20px;
    padding-left: 0;
    > div {
      span {
        margin-left: 15px;
      }
    }
  }
  .el-aside {
    background-color: #333744;
    .btn {
      text-align: center;
      color: #fff;
      height: 20px;
      line-height: 20px;
      background-color: #515970;
      letter-spacing: 0.2em;
      cursor: pointer;
    }
    .el-menu {
      border-right:0;
    }
  }
  .el-main {
    background-color: #dddddd;
  }
}
</style>